<template>
    <content>
        <!--轮播图-->
        <section>
            <div class="swiper-container  carousel">
                <div class="swiper-wrapper ff">
                    <div class="swiper-slide"><img src="../../assets/img/100yuan.webp"></div>
                    <div class="swiper-slide"><img src="../../assets/img/boyfriend.webp"></div>
                    <div class="swiper-slide"><img src="../../assets/img/go.gif"></div>
                    <div class="swiper-slide"><img src="../../assets/img/go.webp"></div>
                    <div class="swiper-slide"><img src="../../assets/img/guafen.webp"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </section>
        <!--二穿搭课堂-->
        <section class="looks">
            <div class="wear">
                <!--穿搭课堂-->
                <div class="wear_1">
                    <span class="all">穿搭课堂</span>
                    <span>
						<a>全部</a>
						<a href="#" class="back"><img src="../../assets/img/back.png"></a>
					</span>
                </div>
                <!--样品展示-->
                <div class="wear_2">
                    <div class="show">
                        <a href="#"  v-for="(n,index) in data">
                            <img :src="n.p4">
                            <span class="aa">{{n.title}}</span>
                        </a>
                    </div>
                    <!--文字列表-->
                    <ul class="wear_3">
                        <li v-for="(n,index) in data">{{n.title}}</li>
                    </ul>
                </div>
            </div>
        </section>
        <!--搭配购爆款清单-->
        <div class="free"></div>
        <section>
            <div class="detailedList">
                <span>搭配购爆款清单</span>
                <ul class="detailedList_img show">
                    <li v-for="(n,index) in data"><img :src="n.p5"></li>
                </ul>
            </div>
        </section>
            <!--精选搭配-->
            <ul class="pic">
                <li class="bor-l"></li>
                <li><img src="../../assets/img/start.png">精选搭配</li>
                <li class="bor-r"></li>
            </ul>
            <!--精选-->
            <section>
                <div class="selection">
                    <ul class="wordList">
                        <li>精选</li>
                        <li>暖冬毛衣</li>
                        <li>御寒大衣</li>
                        <li>79元2件</li>
                        <li>119元两件</li>
                        <li>159元封顶</li>
                    </ul>
                    <div class="goodsList">
                        <ul class="goods-first" v-for="n in data">
                            <li>
                                <img :src="n.p4">
                                <h4>{{n.title}}</h4>
                                <span>单价:￥{{n.price}}</span>
                            </li>
                            <li class="add">+</li>
                            <li>
                                <img :src="n.p5">
                                <h4>{{n.title}}</h4>
                                <span>单价:￥{{n.price}}</span>
                            </li>
                            <li class="paylist">
                                <span>两件搭配</span>
                                <span>单价:￥{{n.price}}</span>
                                <h4>两件原价:￥{{n.price}}</h4>
                                <h4>立省{{n.price}}</h4>
                                <button>立即购买</button>
                            </li>
                        </ul>
                    </div>
                </div>
        </section>
    </content>
</template>
<script type="text/ecmascript-6">
    export default{
        props:["data"],
        mounted:()=>{
            var mySwiper = new Swiper ('.carousel',{
                loop: true,
                autoplay:1000,
                // 如果需要分页器
                pagination : '.swiper-pagination'
            })
        }
    }
</script>
<style>
    content{
        flex: 1;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .ff img{
        width: 100%;
        height:1.69rem;
    }
    .swiper-container .swiper-pagination{
        margin-left:-33% ;
    }
    .looks{
        width: 100%;
        background: white;
    }
    .wear span{
        font-size: 18px;
        font-weight: 600;
        color:#9c9a9c;
    }
    .wear_1{
        display: flex;
        justify-content: space-between;
        padding: 0rem 0.15rem;
    }
    .wear_1 .back img{
        display: inline-block;
        width: 0.2rem;
        height: 0.25rem;
        padding: 0.13rem 0;
        vertical-align: middle;
    }
    .wear_1 .all{
        padding: 0.1rem 0;
    }
    .wear_2{
        width: 100%;
        background: white;
        padding: 0.15rem 0;
    }
    .wear_2 a{
        color: #313031;
        font-size: 30px;
        margin:0 0.09rem;
    }
    .wear_2 .aa{
        display: block;
        text-align: center;
    }
    .wear_2 a img{
        width: 1.43rem;
        height: 2.88rem;
    }
    .show{
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        margin-top: -0.2rem;
    }
    .wear_3{
        display: flex;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        margin: 0.3rem 2% 0rem;
    }
    .wear_3 li{
        width: 1.45rem;
        height: 0.59rem;
        background: url(../../assets/img/w2.png);
        background-size: cover;
        border-radius: 0.07rem;
        /*white-space: nowrap;*/
        display: inline-table;
        /*float: left;*/
        font-size: 24px;
        margin-right: 34%;
        text-align: center;
        line-height: 0.59rem;
        font-weight: 600;
    }
    .free{
        width: 100%;
        margin-top: 0.12rem;
    }
    .detailedList{
        background: white;
        color: #636563;
        font-size: 20px;
        padding-left: 0.18rem;
        padding-top: 0.23rem;
    }
    .detailedList_img{
        width: 100%;
        display: flex;
        margin: 0.29rem 0 0.16rem 0;
        padding-bottom: 0.16rem;
    }
    .detailedList_img li{
        width: 2.15rem;
        height: 1.48rem;
        display: inline-table;
        margin-right:62%;
    }
    .detailedList_img li img{
        width: 100%;
        height: 100%;
    }
    .pic{
        width: 100%;
        height: 0.5rem;
        display: flex;
        color: #313031;
        font-size: 16px;
    }
    .pic li{
        text-align: center;
        margin: 0 auto;
        line-height: 0.5rem;
        display: flex;
        align-items: center;
    }
    .pic li img{
        width: 0.23rem;
        height: 0.23rem;
        margin-right: 0.05rem;
    }
    .pic .bor-l{
        width: 0.75rem;
        background: url(../../assets/img/aa3.png) no-repeat center left;
    }
    .pic .bor-r{
        width: 0.75rem;
        background: url(../../assets/img/aa3.png) no-repeat center left;
    }
    .selection{
        background: white;
        width: 100%;
    }
    .wordList{
        width: 100%;
        height: 0.66rem;
        line-height: 0.66rem;
        display: flex;
        color: #636563;
        font-size: 20px;
        overflow: hidden;
        overflow-x: auto;
        border-bottom: 1px solid #efefef;
    }
    .wordList li{
        /*margin-right: 0.3rem;*/
        padding: 0 0.18rem;
        margin-right: 15%;
        display: inline-table;
        width: 0.8rem;
        text-align: center;

    }
    .wordList li:hover{
        background: #FF5573;
        color: white;
    }
    .goods-first{
        width: 100%;
        display: flex;
        position: relative;
        border-bottom: 1px solid #efefef;
    }
    .goods-first li{
        font-size: 16px;
        display: flex;
        flex-direction: column;
        margin: 0.2rem 0;
        text-align: center;
        width: 33.3%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 0.17rem;
    }
    .goods-first li h4{
        /*font-weight: 100;*/
        color: #636563;
    }
    .goods-first li img{
        width: 100%;
        height: 1.51rem;
    }
    .goods-first li span{
        color: #FF5573;
        font-weight: 600;
    }
    .paylist{
        line-height: 0.25rem;
    }
    .paylist h4{
        font-size: 14px;
        font-weight: 600;
    }
    .paylist button{
        width: 0.75rem;
        height: 0.44rem;
        background: #FF5573;
        border: 0;
        outline: none;
        margin: 0.14rem auto;
        color: white;
        font-weight: 600;
        border-bottom: 1px solid #efefef;
    }
    .goods-first .add{
        width: 0.3rem;
        height: 0.3rem;
        background: #ffdfe7;
        position: absolute;
        top: 21%;
        left: 27%;
        border-radius: 50%;
        border: 2px solid white;
        color: #ff6584;
        text-align: center;
        line-height: 0.25rem;
        font-weight: 600;
        font-size: 20px;
    }
</style>